<template>
	<view class="xmdetail">
		<headertop title="详情" str1="oridei" :back1="back1"></headertop>
		<up-swiper height="317" :list="list6" @click="clickloop" @change="e => currentNum = e.current" autoplay
			circular="true" indicatorStyle="right: 20px;bottom:35px">
			<template #indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</template>
		</up-swiper>

		<view class="fixedtop" :style="{'top':barHeight*1+statusBarHeight*1+'px','background':booltop?'#fff':''}"
			v-if="booltop">
			<view class="tabline">
				<view class="tabline">
					<view :class="tabind==0?'tabitem active':'tabitem'" @click="tabind=0">
						基本情况
						<view class="activebox" v-if="tabind==0">

						</view>
					</view>
					<view :class="tabind==1?'tabitem active':'tabitem'" @click="tabind=1">
						产品户型
						<view class="activebox" v-if="tabind==1">

						</view>
					</view>
					<view :class="tabind==2?'tabitem active':'tabitem'" @click="tabind=2">
						区位配套
						<view class="activebox" v-if="tabind==2">

						</view>
					</view>
					<view :class="tabind==3?'tabitem active':'tabitem'" @click="tabind=3">
						证件及其他
						<view class="activebox" v-if="tabind==3">

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomcontent">
			<view class="wankebox">
				<view class="titleline">
					<view class="title">
						{{contentobj['title']}}
					</view>
					<view class="gzbtn" @click="gz">
						<image
							:src="contentobj.like==0?'https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(8).png':'https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250806111541.png'"
							mode="">
						</image>
						<span>关注</span>
					</view>
				</view>
				<view class="yyline">
					<view class="yjbox" v-if="userobj['level']>0">
						<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11791@2x.png"
							class="yjboxback" mode=""></image>
						<span class="yjt">佣金</span>
						<view class="bfb">
							{{contentobj['yongjin']}}
						</view>
					</view>
					<view class="fj" v-for="(item,index) in contentobj.product" :key="index">
						{{item}}
					</view>
				</view>
				<view class="pfmbox">
					<view class="pfmbox1" style="border-right: 2rpx solid #E5E6EB;">
						<view class="num">
							{{contentobj['price']}}
						</view>
						<view class="tt">
							主力产品单价段
						</view>
					</view>
					<view class="pfmbox1">
						<view class="num1">
							{{contentobj['mianji']}}
						</view>
						<view class="tt">
							主力户型面积段
						</view>
					</view>
				</view>
				<view class="wztt">
					<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11434@2x.png" class="wzttback"
						mode=""></image>
					<view class="dzxinxi">
						<view class="leftdz">
							<view class="titlelin">
								<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(9).png"
									class="dzicon" mode=""></image>
								<span>项目位置</span>
							</view>
							<view class="addressms">
								{{contentobj['address']}}
							</view>
						</view>
						<image @click="daohang"
							src="https://jingwei.xunfuzhifuzaixian.com/static/images/hh微信图片_20250811133240.png"
							class="dzicon1" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="cardff">
				<view class="cardffcenter" id="target-element0">
					<view class="tabline" v-if="!booltop">
						<view :class="tabind==0?'tabitem active':'tabitem'" @click="tabind=0">
							基本情况
							<view class="activebox" v-if="tabind==0">

							</view>
						</view>
						<view :class="tabind==1?'tabitem active':'tabitem'" @click="tabind=1">
							产品户型
							<view class="activebox" v-if="tabind==1">

							</view>
						</view>
						<view :class="tabind==2?'tabitem active':'tabitem'" @click="tabind=2">
							区位配套
							<view class="activebox" v-if="tabind==2">

							</view>
						</view>
						<view :class="tabind==3?'tabitem active':'tabitem'" @click="tabind=3">
							证件及其他
							<view class="activebox" v-if="tabind==3">

							</view>
						</view>
					</view>
					<view class="jibeninfo">
						<view class="titled">
							<view class="sk">

							</view>
							<span>基本信息</span>
						</view>
						<view class="nrll">
							<view class="xinxi">
								占地面积:<span style="color: #4E5969;">{{contentobj['areanum']}}</span>
							</view>
							<view class="xinxi">
								建筑面积:<span style="color: #4E5969;">{{contentobj['jianzhu']}}</span>
							</view>
						</view>
						<view class="nrll">
							<view class="xinxi">
								容积率:<span style="color: #4E5969;">{{contentobj['rongji']}}</span>
							</view>
							<view class="xinxi">
								绿化率:<span style="color: #4E5969;">{{contentobj['lvhua']}}</span>
							</view>
						</view>
						<view class="nrll">
							<view class="xinxi">
								交付时间:<span style="color: #4E5969;">{{contentobj['jiaofu']}}</span>
							</view>
							<view class="xinxi">
								土地年限:<span style="color: #4E5969;">{{contentobj['tudi']}}</span>
							</view>
						</view>
						<view class="nrll">
							<view class="xinxi" style="margin-bottom: 0rpx;">
								开发商:<span style="color: #4E5969;">{{contentobj['company']}}</span>
							</view>

						</view>
					</view>
					<view class="jibeninfo" style="border-top: none;margin-top: 0rpx;">
						<view class="titled">
							<view class="sk">

							</view>
							<span>主导产业</span>
						</view>
						<view class="bqnr">
							<view class="box" v-for="(item,index) in contentobj.chanye" :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="jibeninfo" style="border-top: none;margin-top: 0rpx;">
						<view class="titled">
							<view class="sk">

							</view>
							<span>项目简介</span>
						</view>
						<view class="jianshu">
							<view class="nr">
								<up-parse :content="contentobj['content']"></up-parse>
							</view>
						</view>

					</view>
					<view class="jibeninfo" style="border-top: none;margin-top: 0rpx;" v-if="contentobj.guihuatu">
						<view class="titled" style="margin-bottom: 20rpx;">
							<view class="sk">

							</view>
							<span>项目规划图</span>
						</view>
						<view class="imagestype">
							<view :class="activegh==-1?'mk active1':'mk'" @click="activegh=-1">
								全部
							</view>
							<view :class="activegh==index?'mk active1':'mk'" v-for="(item,index) in contentobj.guihuatu"
								:key="index" @click="ff(index)">
								{{item.title}}
							</view>
						</view>
						<up-swiper ref="mySwiper" autoplay style="margin-bottom: 28rpx;" height="149" :list="list5"
							@change="e => currentgh = e.current" :current="currentgh" :autoplay="false"
							@click="clickloop1">
							<template #indicator>
								<view class="indicator">
									<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
										:class="[index === currentgh && 'indicator__dot--active']">
										<view class="cc" v-if="index === currentgh">

										</view>
									</view>
								</view>
							</template>
						</up-swiper>
					</view>
				</view>
			</view>
			<view class="cardff">
				<view class="cardffcenter">
					<view class="titled1" id="target-element1">
						<view class="sk">

						</view>
						<span>产品配置</span>
					</view>
					<view class="texts">
						<up-parse :content="contentobj['cpcontent']"></up-parse>
						<!-- 	<view class="ttlin">
							<view class="labletext">
								层数：
							</view>
							<view class="rightt">
								{{contentobj['']}}
							</view>
						</view>
						<view class="ttlin">
							<view class="labletext">
								层高：
							</view>
							<view class="rightt">
								分层1层8米、2-8米3.5米、分栋1层7米、2层56米、3-4层4.2米
							</view>
						</view>
						<view class="ttlin">
							<view class="labletext">
								承重：
							</view>
							<view class="rightt">
								楼上均为500-800kg
							</view>
						</view>
						<view class="ttlin">
							<view class="labletext">
								柱距：
							</view>
							<view class="rightt">
								8米
							</view>
						</view>
						<view class="ttlin">
							<view class="labletext">
								产品优势：
							</view>
							<view class="rightt" style="width: 486rpx;">
								这是产品游戏内容
							</view>
						</view> -->

					</view>
					<view class="jibeninfo" style="border-bottom: none;margin-top: 30rpx;">
						<view class="tabbox">
							<view :class="activefc==0?'fc ac':'fc'" @click="activefc=0" v-if="contentobj['fenceng']">
								<span>分层厂房</span>
								<view class="activebox" v-if="activefc==0">

								</view>
							</view>
							<view :class="activefc==1?'fc ac':'fc'" @click="activefc=1" v-if="contentobj['fendong']">
								<span>分栋厂房</span>
								<view class="activebox" v-if="activefc==1">

								</view>
							</view>
						</view>
						<view class="contents" v-if="activefc==0">
							<view class="itembox1" v-for="(item,index) in contentobj['fenceng']" :key="index">
								<image @click="previewImage(item.image)" :src="item.image" mode=""></image>
								<view class="tt">
									<view class="tlt">
										{{item.title}}
									</view>
									<view class="tlt1">
										<span><span style="font-weight: bold;
								font-size: 36rpx;color: #F53F3F;">{{item.price}}</span></span>
										<span style="color: #4E5969;">{{item.mianji}}</span>
									</view>

								</view>
							</view>
						</view>
						<view class="contents" v-if="activefc==1">
							<view class="itembox1" v-for="(item,index) in contentobj['fendong']" :key="index">
								<image @click="previewImage(item.image)" :src="item.image" mode=""></image>
								<view class="tt">
									<view class="tlt">
										{{item.title}}
									</view>
									<view class="tlt1">
										<span><span style="font-weight: bold;
						font-size: 36rpx;color: #F53F3F;">{{item.price}}</span></span>
										<span style="color: #4E5969;">{{item.mianji}}</span>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cardff">
				<view class="cardffcenter">
					<view class="titled1" id="target-element2">
						<view class="sk">

						</view>
						<span>生活配套</span>
					</view>
					<view class="texts">
						<up-parse :content="contentobj['peitao']"></up-parse>

					</view>
					<view class="jibeninfo" style="border-bottom: none;margin-top: 0rpx;">
						<view class="titled">
							<view class="sk">

							</view>
							<span>生产配套</span>
						</view>
						<view class="fenleiboxss">
							<view class="itemfenlei" v-for="(item,index) in contentobj.scpt" :key="index">
								<image :src="item.show==1?item['showimage']:item['image']" mode=""></image>
								<span>{{item['title']}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cardff" v-if="contentobj.zhengjian" id="target-element3">
				<view class="cardffcenter">
					<view class="titled1" style="margin-bottom: 20rpx;">
						<view class="sk">

						</view>
						<span>证件及其他</span>
					</view>
					<view class="imagestype1">
						<view :class="activezj==-1?'mk active1':'mk'" @click="activezj=-1">
							全部
						</view>
						<view :class="activezj==index?'mk active1':'mk'" v-for="(item,index) in contentobj['zhengjian']"
							:key="index" @click="ff1(index)">
							{{item['title']}}
						</view>
					</view>
					<up-swiper height="149" :list="list4" :current="activezj" @change="e => current = e.current"
						@click="clickloop2">
						<template #indicator>
							<view class="indicator">
								<view class="indicator__dot" v-for="(item, index) in list4" :key="index"
									:class="[index === current && 'indicator__dot--active']">
									<view class="cc" v-if="index === current">

									</view>
								</view>
							</view>
						</template>
					</up-swiper>
					<view class="" style="height: 32rpx;">

					</view>
				</view>
			</view>

			<view class="cardff1" v-if="contentobj['hetong'].length">
				<view class="linebox" v-for="item in contentobj['hetong']">
					<view class="tt">
						{{item['title']}}
					</view>
					<view class="btnxz" @click="downfun(item.file)">
						下载
					</view>
				</view>
			</view>
		</view>
		<userlogin ref="denglu" @updata="getuser"></userlogin>
		<drag-button :isDock="true" :existTabBar="true" />
	</view>
</template>

<script setup>
	import dragButton from "@/components/drag-button/drag-button.vue";
	import userlogin from '@/components/getuser/getuser.vue'
	import headertop from '@/components/header.vue'
	import ulm, {
		$api
	} from '@/ulm';
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom,
		onUnload,
		onShareTimeline,
		onShareAppMessage,
	} from "@dcloudio/uni-app";
	import {
		getToken,
		setToken
	} from '@/ulm/utils/auth';
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	const list5 = ref([
		_static('https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11845@2x.png'),
		_static('https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11845@2x.png')
	]);
	const list4 = ref([
		_static('https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11845@2x.png'),
		_static('https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11845@2x.png')
	]);
	const activegh = ref(-1)
	const back1 = ref('')
	const current = ref(0)
	const currentgh = ref(0)
	const contentobj = ref({})
	const booltop = ref(false)
	const activezj = ref(-1)
	const mySwiper = ref(null)
	const denglu = ref(null)
	const userobj = ref({})
	const tabind = ref(0)
	const activefc = ref(0)
	const currentNum = ref(0)
	const statusBarHeight = ref(0)
	const barHeight = ref(0)
	const list6 = ref([
		'https://jingwei.xunfuzhifuzaixian.com/static/images/Rectangle 24476@2x(1).png',
		'https://jingwei.xunfuzhifuzaixian.com/static/images/Rectangle 24476@2x(1).png',
		'https://jingwei.xunfuzhifuzaixian.com/static/images/Rectangle 24476@2x(1).png'
	]);
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	watch(() => tabind.value, (newCount, oldCount) => {
		const query = uni.createSelectorQuery();

		if (newCount == 0) {
			uni.pageScrollTo({
				duration: 300,
				selector: '#target-element0'
			});
		} else if (newCount == 1) {
			uni.pageScrollTo({
				duration: 300,
				selector: '#target-element1'
			});
		} else if (newCount == 2) {
			uni.pageScrollTo({
				duration: 300,
				selector: '#target-element2'
			});
		} else if (newCount == 3) {
			uni.pageScrollTo({
				duration: 300,
				selector: '#target-element3'
			});
		}
	});

	onPageScroll((e) => {
		console.log(e, 'eeeeeeeeeeeee');
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
		if (e.scrollTop > 400) {
			booltop.value = true
		} else {
			booltop.value = false
		}
	})
	onLoad((opt) => {
		init(opt.id)
	})
	onShow(() => {
		if (getToken()) {
			getuser()
		}
	})
	onShareAppMessage(() => {
		return {
			title: '敏智云康小程序', //分享的名称
			path: '/sub_index/index/xmdetail?id=' + contentobj.value.id
			//页面的路径
		}
	})
	//分享到朋友圈
	onShareTimeline(() => {
		return {
			title: '敏智云康小程序', //分享的名称
			path: '/sub_index/index/xmdetail?id=' + contentobj.value.id
			//页面的路径
		}
	})
	async function getuser() {
		const res = await $api.userxinxi()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}
	async function gz() {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		const res = await $api.addlike({
			hid: contentobj.value.id
		})
		if (res.code == 1) {
			if (contentobj.value.like == 1) {
				contentobj.value.like = 0
			} else {
				contentobj.value.like = 1
			}
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function downfun(url) {
		//下载文件，生成临时地址
		wx.downloadFile({
			url: url,
			filePath: wx.env.USER_DATA_PATH + '/测试文档.doc',
			success(res) {
				//保存到本地

				// 打开文件
				// const filePath =res.tempFilePath
				const filePath = res.filePath
				wx.openDocument({
					filePath,
					showMenu: true,
					fileType: 'doc', //docx、zip、xlsx等
					success: function(res) {
						console.log('打开文档成功')
					},
				});
			}
		})
	}
	async function init(id) {
		const res = await $api.hosedetail({
			id
		})
		if (res.code == 1) {
			contentobj.value = res.data
			list6.value = res.data.images
			list5.value = res.data.guihuatu.map(item => item.image)
			list4.value = res.data.zhengjian.map(item => item.image)
		}
	}

	function daohang() {
		uni.openLocation({
			latitude: contentobj.value.lat * 1, //纬度
			longitude: contentobj.value.lng * 1, //经度
			address: contentobj.value.address,
			success: function() {
				console.log('打开位置成功');
			},
			fail: function(err) {
				console.error('打开位置失败', err);
			}
		});
	}

	function previewImage(str) {
		uni.previewImage({
			current: 0, // 当前显示图片的http链接
			urls: [str] // 可以预览多张图片，只需将urls数组中的URLs替换即可
		});
	}

	function ff(index) {
		currentgh.value = index
		activegh.value = index
	}

	function ff1(index) {
		current.value = index
		activezj.value = index
	}

	function clickloop(e) {
		uni.previewImage({
			current: e, // 当前显示图片的http链接
			urls: list6.value // 可以预览多张图片，只需将urls数组中的URLs替换即可
		});
	}

	function clickloop1(e) {
		uni.previewImage({
			current: e, // 当前显示图片的http链接
			urls: list5.value // 可以预览多张图片，只需将urls数组中的URLs替换即可
		});
	}

	function clickloop2(e) {
		uni.previewImage({
			current: e, // 当前显示图片的http链接
			urls: list4.value // 可以预览多张图片，只需将urls数组中的URLs替换即可
		});
	}
</script>

<style lang="scss">
	.cardff1 {
		width: 686rpx;
		overflow: hidden;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 26rpx auto;

		.linebox {
			width: 630rpx;
			margin: auto;
			height: 108rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #F2F3F5;

			.btnxz {
				width: 102rpx;
				height: 46rpx;
				background: #EEF9FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #13A2E6;
				text-align: center;
				line-height: 46rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #13A2E6;
			}

			.tt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #1D2129;
				width: 300rpx;
				white-space: nowrap;
				/* 给文本设置不换行在一行中显示 */
				overflow: hidden;
				/* 文本超出的部分隐藏 */
				text-overflow: ellipsis;
				/* 文本超出的部分用省略号代替 */
			}
		}

		.rightbrn {
			margin-right: 28rpx;
			width: 180rpx;
			height: 64rpx;
			background: #EEF9FF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #13A2E6;
			text-align: center;
			line-height: 64rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #23ACED;
		}

		.llft {
			display: flex;
			align-items: center;

			.icc {
				width: 56rpx;
				height: 56rpx;
				margin-left: 28rpx;
			}

			.titles {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #1D2129;
				margin-left: 20rpx;
			}
		}
	}

	.fixedtop {
		width: 100%;
		position: fixed;
		top: 0%;
		transition: 1s;
		padding: 28rpx 0;
		z-index: 999;

		.tabline {
			width: 630rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: auto;

			.active {
				font-weight: bold !important;
				font-size: 28rpx;
				color: #1D2129 !important;
			}

			.tabitem {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;

				.activebox {
					width: 64rpx;
					height: 4rpx;
					background: #23ACED;
					border-radius: 2rpx 2rpx 2rpx 2rpx;
					position: absolute;
					bottom: -8rpx;
				}
			}
		}
	}

	page {
		background: #F7F8FA;
	}

	.xmdetail {
		width: 100%;
		overflow: hidden;


		.bottomcontent {
			margin-top: -50rpx;
			width: 100%;
			position: relative;

			::v-deep .u-swiper__indicator {
				bottom: 16rpx !important;
			}

			::v-deep .u-swiper {
				border-radius: 24rpx 24rpx 24rpx 24rpx !important;
				margin-top: 24rpx;
			}

			.indicator {
				@include flex(row);
				justify-content: center;
				align-items: center;

				&__dot {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.63);
					margin: 0 2px;
					transition: background-color 0.3s;

					.cc {
						width: 12rpx;
						height: 12rpx;
						background: #FFFFFF;
						border-radius: 50%;
					}

					&--active {
						border: 1rpx solid #FFFFFF;
						border-radius: 50%;
						padding: 4rpx;
					}
				}
			}

			.indicator-num {
				padding: 2px 0;
				background-color: rgba(0, 0, 0, 0.35);
				border-radius: 100px;
				width: 35px;
				@include flex;
				justify-content: center;

				&__text {
					color: #FFFFFF;
					font-size: 12px;
				}
			}



			.cardff {
				width: 686rpx;
				overflow: hidden;
				margin: 28rpx auto;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.cardffcenter {
					width: 630rpx;
					margin: auto;

					.imagestype1 {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 24rpx;
						flex-wrap: wrap;

						.mk {
							padding: 8rpx 22rpx;
							font-size: 24rpx;
							color: #4E5969;
							background: #F7F8FA;
							margin-right: 30rpx;
							margin-bottom: 16rpx;
						}

						.active1 {
							background: #EEF9FF !important;
							color: #23ACED !important;
						}
					}

					.texts {
						width: 100%;
						overflow: hidden;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #4E5969;

						.ttlin {
							width: 100%;
							display: flex;
							margin-bottom: 24rpx;

							.labletext {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #1D2129;
							}

							.rightt {
								width: 530rpx;
								overflow: hidden;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #4E5969;
							}
						}
					}

					.titled1 {
						width: 100%;
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D2129;
						margin-bottom: 28rpx;
						margin-top: 28rpx;

						.sk {
							width: 4rpx;
							height: 24rpx;
							background: #23ACED;
							border-radius: 0rpx 4rpx 4rpx 0rpx;
							margin-right: 8rpx;
						}
					}

					.jibeninfo {
						width: 100%;
						margin-top: 38rpx;
						padding: 28rpx 0;
						overflow: hidden;
						border-top: 2rpx solid #F7F8FA;
						border-bottom: 2rpx solid #F7F8FA;

						.contents {
							width: 100%;
							margin-top: 38rpx;
							overflow: hidden;

							.itembox1 {
								width: 100%;
								height: 214rpx;
								background: #F7F8FA;
								border-radius: 16rpx 16rpx 16rpx 16rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-bottom: 24rpx;

								image {
									width: 206rpx;
									height: 174rpx;
									border-radius: 12rpx 12rpx 12rpx 12rpx;
									margin-left: 20rpx;
								}

								.tt {
									width: 348rpx;
									margin-right: 32rpx;
									overflow: hidden;

									.tlt {
										width: 100%;
										margin-top: 20rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: bold;
										font-size: 28rpx;
										color: #1D2129;
									}

									.tlt1 {
										width: 100%;
										margin-top: 66rpx;
										font-size: 28rpx;
										display: flex;
										align-items: center;
										justify-content: space-between;
									}
								}
							}
						}

						.tabbox {
							width: 100%;
							display: flex;
							align-items: center;

							.ac {
								font-size: 28rpx;
								color: #1D2129 !important;
								font-weight: bold !important;
							}

							.fc {
								width: 50%;
								text-align: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #4E5969;
								position: relative;
								display: flex;
								flex-direction: column;
								align-items: center;

								.activebox {
									width: 64rpx;
									height: 4rpx;
									background: #23ACED;
									border-radius: 2rpx 2rpx 2rpx 2rpx;
									position: absolute;
									bottom: -8rpx;

								}
							}
						}

						.bqnr {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							align-items: center;

							.box {
								padding: 6rpx 20rpx;
								background: #E8F3FF;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #1388BF;
								margin-right: 24rpx;
							}
						}

						.jianshu {
							width: 630rpx;
							background: linear-gradient(360deg, #F9FDFF 67%, #EBF9FF 100%);
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							overflow: hidden;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #4E5969;

							.nr {
								width: 586rpx;
								overflow: hidden;
								margin: 24rpx auto;
							}
						}

						.imagestype {
							width: 100%;
							display: flex;
							align-items: center;

							.active1 {
								background: #EEF9FF !important;
								color: #23ACED !important;
							}

							.mk {
								width: 120rpx;
								height: 48rpx;
								background: #F7F8FA;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								text-align: center;
								line-height: 48rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #4E5969;
								margin-right: 28rpx;
							}
						}

						.fenleiboxss .itemfenlei:nth-child(4n) {
							margin-right: 0rpx !important;
						}

						.fenleiboxss {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							align-items: center;



							.itemfenlei {
								width: 80rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								font-family: PingFang SC,
									PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #1D2129;
								margin-right: 100rpx;
								margin-bottom: 24rpx;

								image {
									margin-bottom: 12rpx;
									width: 80rpx;
									height: 80rpx;
								}
							}
						}

						.titled {
							width: 100%;
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #1D2129;
							margin-bottom: 28rpx;

							.sk {
								width: 4rpx;
								height: 24rpx;
								background: #23ACED;
								border-radius: 0rpx 4rpx 4rpx 0rpx;
								margin-right: 8rpx;
							}
						}

						.nrll {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.xinxi {
								width: 300rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #1D2129;
								margin-bottom: 24rpx;
							}
						}
					}

					.tabline {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 28rpx;

						.active {
							font-weight: bold !important;
							font-size: 28rpx;
							color: #1D2129 !important;
						}

						.tabitem {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							position: relative;
							display: flex;
							flex-direction: column;
							align-items: center;

							.activebox {
								width: 64rpx;
								height: 4rpx;
								background: #23ACED;
								border-radius: 2rpx 2rpx 2rpx 2rpx;
								position: absolute;
								bottom: -8rpx;
							}
						}
					}
				}


			}

			.wankebox {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				overflow: hidden;

				.wztt {
					width: 630rpx;
					height: 140rpx;
					position: relative;
					margin: 24rpx auto;
					display: flex;
					align-items: center;
					justify-content: center;

					.wzttback {
						width: 100%;
						height: 140rpx;
						position: absolute;
					}

					.dzxinxi {
						z-index: 999;
						width: 582rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.dzicon1 {
							width: 72rpx;
							height: 72rpx;
						}

						.leftdz {
							width: 486rpx;
							overflow: hidden;

							.titlelin {
								width: 100%;
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #1D2129;

								.dzicon {
									width: 32rpx;
									height: 32rpx;
									margin-right: 8rpx;
								}
							}

							.addressms {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #4E5969;
								margin-top: 16rpx;
							}
						}
					}
				}

				.pfmbox {
					width: 630rpx;
					height: 128rpx;
					background: #F7F8FA;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin: auto;
					margin-top: 26rpx;
					display: flex;
					align-items: center;

					.pfmbox1 {
						width: 50%;
						height: 88rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.num1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #4E5969;
						}

						.num {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #F53F3F;
						}

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #4E5969;
							margin-top: 14rpx;
						}
					}
				}

				.yyline {
					width: 630rpx;
					display: flex;
					align-items: center;
					margin: auto;
					margin-top: 14rpx;

					.fj {
						height: 40rpx;
						background: #F7F8FA;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						line-height: 40rpx;
						margin-left: 16rpx;
						padding: 0 12rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #4E5969;
					}

					.yjbox {
						width: 196rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						position: relative;

						.yjboxback {
							position: absolute;
							width: 196rpx;
							height: 40rpx;
							z-index: 0;
						}



						.bfb {
							width: 120rpx;
							display: flex;
							justify-content: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #FF7757;
							margin-left: 16rpx;
						}

						.yjt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							z-index: 999;
							margin-left: 10rpx;
						}
					}
				}

				.titleline {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 630rpx;
					margin: auto;
					margin-top: 34rpx;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;
					}

					.gzbtn {
						width: 148rpx;
						height: 52rpx;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						border: 2rpx solid #2AB4F5;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #2AB4F5;

						image {
							width: 36rpx;
							height: 36rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}
</style>